<div #inputControl>
  <nz-form-item *ngIf="type=='card'">
    <nz-form-label *ngIf="name && type=='card'" [nzSpan]="labelWidth" [nzRequired]="required"
                   nzNoColon="true">{{name}}</nz-form-label>
    <div nz-col [nzSpan]="24 - labelWidth">
      <nz-form-control [nzSpan]="inputWidth">
        <nz-upload
          [nzAction]="uploadUrl"
          nzListType="picture-card"
          [(nzFileList)]="fileList"
          [nzShowButton]="!readonly && fileList.length < max"
          [nzSize]="fileSize"
          [nzData]="params"
          [nzLimit]="multipleLimit"
          [nzMultiple]="isMultiple"
          [nzShowUploadList]="showUploadList"
          [nzPreview]="handlePreview"
          [nzWithCredentials]="true"
          [nzAccept]="accept"
          [nzDisabled]="disabled"
          [nzBeforeUpload]="beforeUpload"
          [nzRemove]="onRemove"
          (nzChange)="handleChange($event)"
        >
          <i nz-icon nzType="plus"></i>
          <div class="ant-upload-text">Upload</div>
        </nz-upload>
        <nz-modal
          [nzVisible]="previewVisible"
          [nzContent]="modalContent"
          [nzFooter]="null"
          [nzClosable]="false"
          [nzWidth]="'70%'"
          [nzBodyStyle]="{padding:'0px'}"
          (nzOnCancel)="previewVisible = false"
        >
        </nz-modal>
        <input dhl-input-element hidden isArray="true" [value]="value"/>
      </nz-form-control>
    </div>
  </nz-form-item>
</div>

<span #uploadBtnRef>
  <nz-upload [nzAction]="uploadUrl"
             (nzChange)="handleChange($event)"
             [nzAccept]="accept"
             [nzSize]="fileSize"
             [nzData]="params"
             [nzDisabled]="disabled"
             *ngIf="type=='button'">
    <dhl-button [name]="name" icon="upload" [sizeType]="btnSizeType" [loading]="loading"></dhl-button>
  </nz-upload>
</span>

<ng-template #modalContent>
  <img [src]="previewImage" [ngStyle]="{ width: '100%' }"/>
</ng-template>








